<template>
  <client-only>
    <div>
      <section class="container">
        <div class="mr30">
          <div class="i-box">
            <!-- 标题 -->
            <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
              <a name="c-i" class="current" title="订单列表">订单列表</a>
            </section>
            <section class="c-sort-box unBr">
              <div>
                <!-- /无数据提示 开始-->
                <section v-if="list.length === 0" class="no-data-wrap">
                  <em class="icon30 no-data-ico">&nbsp;</em>
                  <span class="c-666 fsize14 ml10 vam"
                    >您当前还没有订单...</span
                  >
                </section>
                <!-- /无数据提示 结束-->
                <!-- 订单表格 -->
                <el-table
                  v-else
                  :data="list"
                  border
                  fit
                  highlight-current-row
                  row-class-name="myClassList"
                >
                  <el-table-column label="课程信息" width="300" align="center">
                    <template slot-scope="scope">
                      <div>
                        <div>
                          <img
                            width="100"
                            :src="scope.row.courseCover"
                            :alt="scope.row.courseTitle"
                          />
                        </div>
                        <div class="title">
                          <a :href="`/course/${scope.row.courseId}`">
                            {{ scope.row.courseTitle }}
                          </a>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="讲师名称" width="100" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.teacherName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="价格" width="100" align="center">
                    <template slot-scope="scope">
                      <!-- toFixed：保留两位小数 -->
                      <span>
                        {{
                          scope.row.totalFee === 0
                            ? "免费"
                            : "￥" + scope.row.totalFee.toFixed(2)
                        }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="创建时间" width="200" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.gmtCreate }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="订单状态" width="100" align="center">
                    <template slot-scope="scope">
                      <el-tag :type="scope.row.status === 1 ? 'success' : ''">
                        {{ scope.row.status === 1 ? "已支付" : "未支付" }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                      <router-link :to="`/course/${scope.row.courseId}`">
                        <el-link type="primary" size="mini" icon="el-icon-edit"
                          >去学习</el-link
                        >
                      </router-link>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 订单表格结束 -->
              </div>
            </section>
          </div>
        </div>
      </section>
    </div>
  </client-only>
</template>

<script>
import orderApi from "/api/order";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.initOrderList();
  },
  methods: {
    initOrderList() {
      orderApi.getOrders().then((res) => {
        this.list = res.data;
      });
    },
  },
};
</script>